import React, { Component } from 'react';
import { NavBar, Swiper, TabBar, Button, Toast } from 'antd-mobile'
import { getgoodinfo } from '../api/detail'
import { StarOutline, SendOutline, ShopbagOutline } from 'antd-mobile-icons'
import { addFav } from '../api/collect'
import {addcart} from '../api/cart'
import '../styles/Detail.css'
class Detail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            id: this.props.match.params.id,
            pics: [],
            msg: '',
            activeKey:'',
            tabs: [
                {
                    key: 'collect',
                    title: '收藏',
                    icon: <StarOutline />
                },
                {
                    key: 'todo',
                    title: '分享',
                    icon: <SendOutline />


                },
                {
                    key: 'cart',
                    title: '购物车',
                    icon: <ShopbagOutline />
                },
            ]
        }
    }
    //详情商品轮播数据请求
    componentDidMount() {
        getgoodinfo({ goodid: this.props.match.params.id }).then((res) => {
            // console.log(res.data.goodinfo, '详情数据');
            this.setState({
                pics: res.data.goodinfo.pics,
                msg: res.data.goodinfo
            })
        })
    }
    //左上角返回
    back() {
        this.props.history.goBack()
    }
    //点击底部按钮
    go(key, id) {
        this.setState({
            activeKey:key
        })
        if (key == 'collect') {
            //添加收藏请求
            addFav({ userid: localStorage.getItem('id'), goodid:id }).then((res)=>{
                // console.log(res,'添加收藏');
               if(res.data.code==200){
                Toast.show({
                    content: '添加收藏成功！',
                  })
               }
            })
        }
        if(key=='cart'){
            this.props.history.push('/index/cart')
        }
    }
    //加入购物车
   async addCart(){
      let res1=await addcart({userid:localStorage.getItem('id'),goodid:this.props.match.params.id})
    //   console.log(res1.data,'加购物车');
      if(res1.data.code==200){
        Toast.show({
            content: '宝贝已加入购物车啦！',
          })
       }     
    }

    render() {
        return (
            <div className='detail'>
                <NavBar onBack={() => { this.back() }}>商品详情</NavBar>
                <Swiper autoplay loop>
                    { 
                        this.state.pics&&
                        this.state.pics.map((item, index) => {
                            return (
                                <Swiper.Item key={index}>
                                    <div className='index'>{index + 1 + '/' + this.state.pics.length}</div>
                                    <img src={item} alt="" />
                                </Swiper.Item>
                            )
                        })
                    }
                </Swiper>
                <div className='text'>
                    <p>{this.state.msg.name}</p>
                    <p>{this.state.msg.description}</p>
                    <p>￥{this.state.msg.salesPrice&&this.state.msg.salesPrice.value}</p>
                </div>
                <div className='footb'>
                    <TabBar activeKey={this.state.activeKey} onChange={(key) => { this.go(key, this.state.id) }}>
                        {
                            this.state.tabs.map(item => {
                                return (
                                    <TabBar.Item
                                        key={item.key}
                                        icon={item.icon}
                                        title={item.title}
                                    />)
                            })
                        }
                    </TabBar>
                    <div className='btns'>
                        <Button color='warning' shape='rounded' fill='solid' onClick={()=>{this.addCart()}}>
                            加入购物车
                        </Button>
                        <Button color='danger' shape='rounded' fill='solid'>
                            立即购买
                        </Button>
                    </div>
                </div>
            </div>
        );
    }
}

export default Detail;